<template>
	<view class="container">
		<view class="msg_box">
			<view class="msg_item" @click="upalodHead">
				<view class="msg_con">
					<view class="msg_left">我的头像</view>
					<view class="msg_right">
						<image class="head_pic" src="/static/tab1/giftcard.png" mode=""></image>
						<image class="right_icon" src="https://qiniu.dadaozhixing.top/dxx/static/right_icon.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="msg_item">
				<view class="msg_con">
					<view class="msg_left">我的ID</view>
					<view class="msg_right">{{infoMsg.id}}</view>
				</view>
			</view>
			<view class="msg_item" @click="uploadMsg(1)">
				<view class="msg_con">
					<view class="msg_left">我的昵称</view>
					<view class="msg_right">
						<view class="msg_right_txt">{{infoMsg.name?infoMsg.name:'请设置昵称'}}</view>
						<image class="right_icon" src="https://qiniu.dadaozhixing.top/dxx/static/right_icon.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="msg_item" @click="uploadMsg(2)">
				<view class="msg_con">
					<view class="msg_left">更换手机号</view>
					<view class="msg_right">
						<view class="msg_right_txt">{{infoMsg.mobile}}</view>
						<image class="right_icon" src="https://qiniu.dadaozhixing.top/dxx/static/right_icon.png" mode=""></image>
					</view>
				</view> 
			</view>
		</view>
		<view class="popup_box" v-if="popflag">
			<view class="popup">
				<view class="pop_tit">{{poptit}}</view>
				<view class="pop_input_box">
					<input v-model="value" class="input" type="text" />
					<image @click="del" class="clane" src="https://qiniu.dadaozhixing.top/dxx/static/clane.png" mode=""></image>
				</view>
				<view class="btn_box">
					<view class="btn btn1" @click="clane">取消</view>
					<view class="btn btn2" @click="submit">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {  
	    mapMutations  
	} from 'vuex';
	import {getLoginInfo,updateById} from '@/api/user.js'
	export default {
		data() {
			return {
				infoMsg:{},
				imagePath:'',
				popflag:false,
				poptit:'',
				value:''
			};
		},
		mounted(){
			uni.getStorage({
				key: 'userInfo',
				success: (res) => {
					this.mobile = res.data.mobile
					this.getLoginInfo()
				}
			});
			 
		},
		methods:{
			del(){
				this.value = ''
			},
			submit(){
				if(this.poptit=='修改昵称'){
					updateById({id:this.infoMsg.id,name:this.value})
					.then(res=>{
						console.log(res)
						this.popflag = false;
						this.poptit = '';
						this.value = '';
						this.getLoginInfo();
						uni.showToast({
							title:'修改成功!'
						})
					})
				}
				else{
					updateById({id:this.infoMsg.id,mobile:this.value})
					.then(res=>{
						console.log(res)
						this.popflag = false;
						this.poptit = '';
						this.value = '';
						this.getLoginInfo();
						uni.showToast({
							title:'修改成功!'
						})
					})
				}
			},
			getLoginInfo(){
				getLoginInfo({mobile:this.mobile,authCode:110086})
				.then(res=>{
					 console.log(res)
					 this.infoMsg = res.data;
				})
			},
			clane(){
				this.popflag = false;
				this.poptit = ''
			},
			uploadMsg(index){
				if(index==1){
					this.popflag = true;
					this.poptit = '修改昵称'
					this.value = this.infoMsg.name?this.infoMsg.name:''
				}
				if(index==2){
					this.popflag = true;
					this.poptit = '修改手机号'
					this.value = this.infoMsg.mobile
				}
			},
			upalodHead(){
				uni.showActionSheet({
					itemList: ["拍照", "从相册选择",'保存图片'],
					success: (res) => {
					  if (res.tapIndex === 0) {
						  this.chooseImage("camera"); // 拍照
					  }
					  else if (res.tapIndex === 1) {
						  this.chooseImage("album"); // 相册
					  }
					  else if(res.tapIndex === 2){
						  
					  }
					}
				});
			},
			chooseImage(sourceType) {
			  uni.chooseImage({
				count: 1, // 选择1张
				sourceType: [sourceType], // ['camera'] 或 ['album']
				success: (res) => {
				  this.imagePath = res.tempFilePaths[0]; // 获取图片路径
				},
				fail: (err) => {
				  console.log("选择图片失败", err);
				}
			  });
			},
			saveImage() {
			  uni.saveImageToPhotosAlbum({
				filePath: this.imagePath,
				success: () => {
				  uni.showToast({ title: "保存成功！" });
				},
				fail: (err) => {
				  // 处理权限拒绝
				  if (err.errMsg.includes("auth deny")) {
					uni.showModal({
					  title: "提示",
					  content: "需要相册权限，请设置允许",
					  success: (res) => {
						if (res.confirm) uni.openSetting(); // 跳转设置页
					  }
					});
				  }
				}
			  });
			}
		}
	}
</script>

<style lang='scss'>
	.popup_box{
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .3);
		position: fixed;
		top: 0;
		left: 0;
		.popup{
			.btn_box{
				margin: 48rpx 40rpx 0;
				display: flex;
				justify-content: space-between;
				.btn{
					width: 248rpx;
					height: 88rpx;
					text-align: center;
					line-height: 88rpx;
					font-size: 32rpx;
					border-radius: 44rpx;
				}
				.btn1{
					border: 1rpx solid #C8C9CC;
					box-sizing: border-box;
					color: #555661;
				}
				.btn2{
					color: #FFFFFF;
					background: #FF5C5C;
				}
			}
			.pop_input_box{
				width: 520rpx;
				height: 96rpx;
				margin: 48rpx 40rpx 0;
				background: #F5F5F9;
				border-radius: 20rpx;
				position: relative;
				.input{
					width: 520rpx;
					height: 96rpx;
					padding: 0 24rpx;
					box-sizing: border-box;
					font-size: 28rpx;
					color: #23242E;
				}
				.clane{
					position: absolute;
					right: 24rpx;
					top: 32rpx;
					width: 32rpx;
					height: 32rpx;
					z-index: 999;
				}
			}
			.pop_tit{
				font-size: 36rpx;
				color: #23242E;
				font-weight: bold;
				text-align: center;
				line-height: 54rpx;
				margin-top: 40rpx;
			}
			width: 600rpx;
			height: 422rpx;
			position: absolute;
			left: 0;
			right: 0;
			margin: 293rpx auto 0;
			background: #fff;
			border-radius: 20rpx;
		}
	}
	.msg_box{
		margin: 24rpx;
		width: 702rpx;
		background: #fff;
		border-radius: 20rpx;
		.msg_item{
			padding: 0 24rpx;
			.msg_con{
				border-bottom: 1rpx solid #ccc;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 96rpx;
				.msg_left{
					font-size: 28rpx;
					color: #23242E;
				}
				.msg_right{
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 28rpx;
					color: #7F808A;
					.msg_right_txt{
						font-size: 28rpx;
						color: #23242E;
					}
					.head_pic{
						width: 64rpx;
						height: 64rpx;
						border-radius: 50%;
						margin-right: 8rpx;
					}
					.right_icon{
						width: 28rpx;
						height: 28rpx;
					}
				}
			}
		}
		.msg_item:last-child .msg_con{
			border: 0;
		}
	}
	page{
		background: $page-color-base;
	}

</style>
